<template>
    <page-meta :page-style="$theme.pageStyle">
        <!-- #ifndef H5 -->
        <navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
        <!-- #endif -->
    </page-meta>

    <view>
        <!-- 状态切换指示器 -->
        <view class="status-indicator" @tap="openStatusModal">
            <text>{{ statusDisplayText }}</text>
            <u-icon name="arrow-down" size="14" color="#666" margin-left="4"></u-icon>
        </view>

        <!-- 根据用户状态显示不同的主页 -->
        <view class="home-container">
            <!-- 未设置状态，显示引导页 -->
            <view v-if="!userStatus" class="guide-tip">
                <text>您尚未完成初始设置</text>
                <button class="guide-button" @tap="goToSetupGuide">开始设置</button>
            </view>

            <!-- 备孕阶段 -->
            <PreparingHome v-else-if="userStatus === 'preparing'" />

            <!-- 孕期阶段 -->
            <PregnantHome v-else-if="userStatus === 'pregnant'" />

            <!-- 产后阶段 -->
            <PostpartumHome v-else-if="userStatus === 'postpartum'" />
        </view>

        <!-- 状态切换弹窗 -->
        <u-popup v-model="showStatusModal" mode="bottom" border-radius="24" :mask-close-able="true">
            <view class="status-modal">
                <view class="modal-header">
                    <text class="modal-title">选择您的状态</text>
                    <view class="close-btn" @tap="showStatusModal = false">
                        <u-icon name="close" size="16" color="#666"></u-icon>
                    </view>
                </view>

                <view class="modal-content">
                    <view
                        class="status-option"
                        :class="{ selected: selectedStatus === 'preparing' }"
                        @tap="selectStatus('preparing')"
                    >
                        <view class="option-icon">
                            <u-icon name="heart" color="#FF9FB5" size="24"></u-icon>
                        </view>
                        <view class="option-content">
                            <text class="option-title">备孕阶段</text>
                            <text class="option-desc">经期追踪、排卵预测</text>
                        </view>
                        <view class="option-check" v-if="selectedStatus === 'preparing'">
                            <u-icon name="checkmark-circle" color="#FF9FB5" size="20"></u-icon>
                        </view>
                    </view>

                    <view
                        class="status-option"
                        :class="{ selected: selectedStatus === 'pregnant' }"
                        @tap="selectStatus('pregnant')"
                    >
                        <view class="option-icon">
                            <u-icon name="woman" color="#FF9FB5" size="24"></u-icon>
                        </view>
                        <view class="option-content">
                            <text class="option-title">孕期阶段</text>
                            <text class="option-desc">胎儿发育、产检管理</text>
                        </view>
                        <view class="option-check" v-if="selectedStatus === 'pregnant'">
                            <u-icon name="checkmark-circle" color="#FF9FB5" size="20"></u-icon>
                        </view>
                    </view>

                    <view
                        class="status-option"
                        :class="{ selected: selectedStatus === 'postpartum' }"
                        @tap="selectStatus('postpartum')"
                    >
                        <view class="option-icon">
                            <u-icon name="baby-carriage" color="#FF9FB5" size="24"></u-icon>
                        </view>
                        <view class="option-content">
                            <text class="option-title">产后阶段</text>
                            <text class="option-desc">产后恢复、婴儿成长</text>
                        </view>
                        <view class="option-check" v-if="selectedStatus === 'postpartum'">
                            <u-icon name="checkmark-circle" color="#FF9FB5" size="20"></u-icon>
                        </view>
                    </view>
                </view>

                <view class="modal-footer" v-if="showConfirmation">
                    <text class="confirmation-message">确定要切换到新状态吗？</text>
                    <view class="btn-group">
                        <button class="btn-cancel" @tap="cancelStatusChange">取消</button>
                        <button class="btn-confirm" @tap="confirmStatusChange">确认</button>
                    </view>
                </view>
            </view>
        </u-popup>

        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { computed, reactive, ref, onMounted, watch } from 'vue'
import { useAppStore } from '@/stores/app'

// 导入各阶段主页组件
import PreparingHome from './components/PreparingHome.vue'
import PregnantHome from './components/PregnantHome.vue'
import PostpartumHome from './components/PostpartumHome.vue'
import Tabbar from '@/components/tabbar.vue'

// 用户状态 - 默认设置为孕期状态，以便展示原型中的内容
const userStatus = ref<string>('pregnant')
const showStatusModal = ref<boolean>(false)
const selectedStatus = ref<string>('')
const showConfirmation = ref<boolean>(false)

// 状态显示文本
const statusDisplayText = computed(() => {
    switch (userStatus.value) {
        case 'preparing':
            return '备孕期'
        case 'pregnant':
            return '孕期'
        case 'postpartum':
            return '产后期'
        default:
            return '未设置'
    }
})

// 获取用户状态
const getUserStatus = () => {
    try {
        const status = uni.getStorageSync('userStatus')
        if (status) {
            userStatus.value = status
            console.log('当前用户状态:', status)
        } else {
            // 如果没有存储的状态，默认使用孕期状态
            userStatus.value = 'pregnant'
            console.log('用户尚未设置状态，默认使用孕期状态')
        }
    } catch (e) {
        console.error('获取用户状态失败', e)
        // 出错时也默认使用孕期状态
        userStatus.value = 'pregnant'
    }
}

// 打开状态切换弹窗
const openStatusModal = () => {
    selectedStatus.value = userStatus.value
    showConfirmation.value = false
    showStatusModal.value = true
}

// 选择状态
const selectStatus = (status: string) => {
    selectedStatus.value = status
    // 如果选择的状态与当前状态不同，显示确认区域
    showConfirmation.value = status !== userStatus.value
}

// 取消状态变更
const cancelStatusChange = () => {
    showStatusModal.value = false
}

// 确认状态变更
const confirmStatusChange = () => {
    if (selectedStatus.value && selectedStatus.value !== userStatus.value) {
        // 更新状态
        userStatus.value = selectedStatus.value
        // 保存到本地存储
        uni.setStorageSync('userStatus', selectedStatus.value)
        // 关闭弹窗
        showStatusModal.value = false

        // 显示切换成功提示
        uni.showToast({
            title: '状态切换成功',
            icon: 'success',
            duration: 2000
        })
    }
}

// 跳转到设置引导页
const goToSetupGuide = () => {
    uni.navigateTo({
        url: '/pages/index/setup_guide'
    })
}

// 生命周期钩子
onLoad(() => {
    getUserStatus()
})

onMounted(() => {
    getUserStatus()
})
</script>

<style lang="scss" scoped>
.status-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    z-index: 10;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.home-container {
    min-height: calc(100vh - 100rpx); /* 减去底部导航栏高度 */
    background-color: #f5f5f5;
    padding-bottom: 100rpx; /* 为底部导航栏留出空间 */
    padding-top: 80rpx; /* 为状态指示器留出空间 */
}

.guide-tip {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    text-align: center;
}

.guide-tip text {
    font-size: 32rpx;
    color: #666;
    margin-bottom: 30rpx;
}

.guide-button {
    width: 80%;
    height: 90rpx;
    background-color: var(--color-primary, #ff9fb5);
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* 状态切换弹窗样式 */
.status-modal {
    padding: 40rpx;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
}

.modal-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.close-btn {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    margin-bottom: 40rpx;
}

.status-option {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    background-color: #f9f9f9;
    position: relative;
}

.status-option.selected {
    background-color: rgba(255, 159, 181, 0.1);
    border: 2rpx solid #ff9fb5;
}

.option-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: rgba(255, 159, 181, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
}

.option-content {
    flex: 1;
}

.option-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 6rpx;
    display: block;
}

.option-desc {
    font-size: 24rpx;
    color: #999;
    display: block;
}

.option-check {
    position: absolute;
    right: 30rpx;
}

.modal-footer {
    margin-top: 20rpx;
}

.confirmation-message {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    margin-bottom: 20rpx;
    display: block;
}

.btn-group {
    display: flex;
    justify-content: space-between;
}

.btn-cancel,
.btn-confirm {
    width: 48%;
    height: 80rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
}

.btn-cancel {
    background-color: #f5f5f5;
    color: #666;
    border: none;
}

.btn-confirm {
    background-color: var(--color-primary, #ff9fb5);
    color: #ffffff;
    border: none;
}
</style>
